<template>
	<view class="content">
		<template v-if="isShow === false">
			<block v-for="(item,index) in today_line_list" :key="index">
					<view class="animated bounceInLeft slow" style=" margin-top: 40rpx;">
						<text style="border-left: #07D188 solid 12rpx; padding-left: 10rpx; margin-left: 30rpx; ">今日环境指数</text>
					</view>
					<view class="todayEnviro animated bounceInLeft slow">
						<view class="waterList bottomBor">
							<view><image style="height: 60rpx; width: 60rpx;"  src="../../../static/rear/enviroment/1.png"></image><text>水体异味</text></view>
							<view><text>{{item.water_peculiar_smell}}</text></view>
						</view>
						<view class="waterList bottomBor">
							<view><image style="height: 65rpx;padding-left: 10rpx; width: 60rpx;" src="../../../static/rear/enviroment/temperature.png"></image><text>气温</text></view>
							<view><text>{{item.air_temperature}}℃</text></view>
						</view>
						<view class="waterList bottomBor">
							<view><image  src="../../../static/rear/enviroment/2.png"></image><text>水温</text></view>
							<view><text>{{item.water_temperature}} ℃</text></view>
						</view>
						<view class="waterList bottomBor">
							<view><image style="height: 60rpx; width: 60rpx;"  src="../../../static/rear/enviroment/3.png"></image><text>水体浑浊度</text></view>
							<view><text>{{item.water_turbidity}}</text></view>
						</view>
						<view class="waterList bottomBor">
							<view><image style="height: 65rpx; width: 65rpx;" src="../../../static/rear/enviroment/4.png"></image><text>空气湿度</text></view>
							<view><text>{{item.air_humidity}}%rh</text></view>
						</view>
						
						<view class="waterList bottomBor">
							<view><image style="height: 60rpx; width: 60rpx;" src="../../../static/rear/enviroment/5.png"></image><text>空气有无异味</text></view>
							<view><text>{{item.air_odor}}</text></view>
						</view>
						<view class="waterList">
							<view><image style="height: 60rpx; width: 60rpx;"  src="../../../static/rear/enviroment/6.png"></image><text>空气污染程度</text></view>
							<view><text>{{item.air_pollution_degree}}</text></view>
						</view>
						
					</view>
					
					<view class="yestodayEnviro">
						<view class="animated bounceInLeft slow">
							<text style="border-left: #07D188 solid 12rpx; padding-left: 10rpx; margin-left: 30rpx;">往日环境指数</text>
						</view>
						<enviromrnt-line :record_line_list="newYestodayArray" ref="recordline" class="YestodayRecordLine animated bounceInLeft slow"></enviromrnt-line>
					</view>
					
					<view class="bottomNone" v-if="isBottom">
						<text>已无更多记录</text>
					</view>
			</block>
		</template>
		<template v-else>
			<xw-empty :isShow="isShow" text="暂无环境信息" textColor="#777777"></xw-empty>
		</template>	
	</view>
</template>

<script>
	import xwEmpty from '../../../components/xw-empty/xw-empty.vue';
	import enviromrntLine from '../../../components/enviroment-record-line/enviroment-record-line.vue';
	export default {
		data() {
			return {
				today_line_list: [],
				yestoday_line_list: [],
				heightS: 0,
				isBottom: false,
				isShow: false,
				person: '',
				farmId: ''
			}
		},
		components: {
			enviromrntLine,
			xwEmpty
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:"./addEnvironment"
			})
		},
		methods: {
			//获取用户角色
			getRole(){
				this.person = this.User.userRight.name
				console.log(this.person)
				if(this.person==='government'){
					// #ifdef APP-PLUS
					var webView = this.$mp.page.$getAppWebview();
					// 修改buttons 
					webView.setTitleNViewButtonStyle(0, {
					width: '0',
					});
					// #endif
				}
			},
			//自动获取组件内容区域的高度，设置swiper的高度
			getElementHeight(element) {
			    setTimeout(()=>{
			        let query = uni.createSelectorQuery().in(this);
			        query.select(element).boundingClientRect();
			        query.exec((res) => {
			            if (!res) {//如果没获取到，再调一次
			                this.getElementHeight();
			            }else {
			                this.heightS = res[0].height + 500;
			            }
						//console.log(res)
			        })
			    },0)
			},
			
			//获取环境数据
			init () {
				console.log(this.farmId)
				uni.request({
					url:this.confige.webUrl+'/livestock/listGrowth_Environment',
					method: 'GET',
					data:{
						farm_id: this.farmId
					},
					header:{
						"X-Token":this.User.token
					},
					success: (res) => {
						// console.log(res)
						if(res.data.result == null) {
							this.isShow = true
						}else{
							this.today_line_list.push(res.data.result[0])
							this.yestoday_line_list = res.data.result
							this.isShow = false
						}
					}
				})
			},
			
			
		},
		computed: {
			newYestodayArray () {
				return this.yestoday_line_list.slice(1);
			}
		},
		onReachBottom() {
			this.isBottom = true	
		},
		onLoad (option) {
			this.getRole()
			if(this.person === 'government'){
				this.farmId = option.farmId
			}else{
				this.farmId = this.User.userInfo.farm_id
			}
		},
		onReady() {
			this.init();
			
			// this.getElementHeight('.YestodayRecordLine')
		}
	}
</script>

<style lang="less">
	@import '../../../common/animate.css';
	page { background: #f8f8f8;}
	.bottomBor{
		border-bottom: 2rpx solid #F0F0F0;
	}
	.waterList{
		// border: 1rpx solid #000000;
		padding-bottom: 5rpx;
		width: 85%;
		height:80rpx;
		padding-bottom: 12rpx;
		padding-top: 5rpx;
		font-size: 35rpx;
		line-height: 70rpx;
		margin: 10rpx 0rpx;
		display: flex;
		flex-direction: row;
		align-content: center;
		image{ 
			width: 75rpx;
			height: 75rpx;
			padding-right: 25rpx;
		}
		>view:nth-of-type(1){
			padding-right: 15rpx;
			width: 60%;
			display: flex;
			flex-direction: row;
			}
		>view:nth-of-type(2){
			border-left: 1rpx solid #E8E8E8;
			width: 40%;
			height: 70rpx;
			line-height: 70rpx;
			display: flex;
			justify-content: center;
			color: #9B9B9B;
			}
	}
	.todayEnviro {
		display: flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
		height: 680rpx;
		box-shadow: 0rpx 0rpx 10rpx 5rpx #E6E6E6;
		border-radius: 48rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 40rpx;
	}

	// .waterQuality {
	// 	height: 100rpx;
	// 	width: 750rpx;
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	justify-items: center;
	// }
	
	.atmosphere {
		height: 100rpx;
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
	}
	
	.yestodayEnviro {
		width: 750rpx;
		margin-top: 40rpx;
	}
	
	.bottomNone {
		width: 750rpx;
		height: 100rpx;
		margin-top: 40rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 28rpx;
		background: #F2F2F2;
		color: #BBBBBB;
	}
</style>
